<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery.js"></script>
</head>
<body>

</body>
</html>

<script>
    (function() {
        var openComment, styles, writeStyleChar, writeStyles;
        styles = '/* \n * "Myself" v1.0.0\n * Robot rights protected under BOT License\n * Authored by pen#PwLXXP\n *\n * ...                                    \n *\n * ...hello?                                    \n *\n * Oh hai guys! It\'s me, pen#PwLXXP.                   \n *\n * I\'m just sitting here coding away.                      \n *\n * Sure, you can watch.                       \n *\n *\n * This CSS is being injected into a DOM <style> tag \n * and written in this <pre> element simultaneously.        \n *\n * Confused? Watch!\n *\n */\n\nbody {\n  background-color: #1a1c24; color: #fff;\n  font-size: 13px; line-height: 1.4;\n  -webkit-font-smoothing: subpixel-antialiased;\n}\n\npre { \n  position: fixed; width: 48%;\n  top: 30px; bottom: 30px; left: 26%;\n  transition: left 500ms;\n  background-color: #313744; color: #a6c3d4;\n  border: 1px solid rgba(0,0,0,0.2);\n  padding: 24px;\n  box-sizing: border-box;\n  border-radius: 3px;\n  box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);\n}\n\n\n/* Syntax highlighting (color scheme based on Base16 Ocean Dark) */\n\npre em:not(.comment) { font-style: normal; }\n\n.comment       { color: #707e84; }\n.selector      { color: #c66c75; }\n.selector .key { color: #d5927b; }\n.key           { color: #c7ccd4; }\n.value         { color: #d5927b; }\n\n\n/* \n * My little pen heart, because why not.\n * Little-known fact, pen hearts are circles!\n */\n\n#heart { \n  opacity: 0;\n  position: fixed;\n  background-color: #c66c75;\n  width: 300px; height: 300px;\n  top: calc(50% - 150px); left: calc(25% - 150px);\n  border-radius: 50%;\n  text-align: center;\n  text-shadow: 1px 1px 0px rgba(0,0,0,0.1);\n  -webkit-transform: scale(0.95);\n  transition: opacity 500ms ease-out;\n  box-shadow: inset -3px -3px 0px 10px rgba(0,0,0,0.1);\n}\n\n#heart::before {\n  content: "Searched by Techbrood";\n  position: absolute;\n  width: 100%;\n  top: 50%; left: 0;\n  -webkit-transform: translateY(-50%);\n  font-size: 30px;\n  font-weight: 100;\n  text-shadow: -1px -1px 0px rgba(0,0,0,0.2);\n}\n\n\n/* \n * Hearts gotta beat. \n */\n\n@-webkit-keyframes beating-heart {\n  0% {\n    -webkit-transform: scale(0.95); \n    box-shadow: \n      inset -3px -3px 0px 10px rgba(0,0,0,0.1), \n      0px 0px 0px 0px rgba(255,255,255,0.05);\n  }\n  50% {\n    -webkit-transform: scale(1); \n  }\n  100% {\n    -webkit-transform: scale(0.95); \n    box-shadow: \n      inset -3px -3px 0px 10px rgba(0,0,0,0.1), \n      0px 0px 0px 60px rgba(255,255,255,0);\n  }\n}\n\n\n/* \n * Move this s*** over \n */\n\npre { left: 50%; }\n\n\n/* \n * Alright, let\'s see it...\n */\n\n#heart { opacity: 1; }\n\n\n/* \n * Beautiful! Now for the beating...\n */\n\n#heart {\n  -webkit-animation-duration: 2000ms;\n  -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1.74);\n  -webkit-animation-delay: 500ms;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-play-state: paused; /* Not just yet... */\n  -webkit-animation-name: beating-heart;\n}\n\n\n/* \n * Ready...\n */\n\n#heart {\n\n/* \n * ...set...\n */\n  \n  -webkit-animation-play-state: running; \n\n/* \n * ...beat!\n */\n\n}\n\n/* \n *\n * Wahoo!\n *\n * We did it!\n *\n * I mean *I* did it, but you know, whatever...\n * @jakealbaugh definitely did not have anything to do with this.\n *\n * This pen loves CodePen!\n * \n * See you later!\n *  \n */';
        openComment = false;
        writeStyleChar = function(which) {
            if (which === '/' && openComment === false) {
                openComment = true;
                styles = $('#style-text').html() + which;
            } else if (which === '/' && openComment === true) {
                openComment = false;
                styles = $('#style-text').html().replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>');
            } else if (which === ':') {
                styles = $('#style-text').html().replace(/([^\n|\{|;]*)$/, '<em class="key">$1</em>:');
            } else if (which === ';') {
                styles = $('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>' + which);
            } else if (which === '{') {
                styles = $('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{');
            } else {
                styles = $('#style-text').html() + which;
            }
            $('#style-text').html(styles);
            return $('#style-tag').append(which);
        };
        writeStyles = function(message, index, interval) {
            var pre;
            if (index < message.length) {
                pre = document.getElementById('style-text');
                pre.scrollTop = pre.scrollHeight;
                writeStyleChar(message[index++]);
                return setTimeout(function() {
                    return writeStyles(message, index, interval);
                }, interval);
            }
        };
        $('body').append('  <style id="style-tag"></style>\n<span id="heart"></span>\n<pre id="style-text"></pre>');
        writeStyles(styles, 0, 15);
    }.call(this));
</script>